<template>
  <div class="course-filter bg-white p-4">
    <div class="flex flex-wrap items-center gap-4">
      <!-- 课程名称输入 -->
      <div class="flex items-center gap-2">
        <span class="text-gray-600 whitespace-nowrap">{{$t('course.courseName')}}</span>
        <el-input v-model="filterForm.name" :placeholder="$t('common.inputPhTxt', [$t('course.courseName')])" class="w-48" clearable maxlength="50" />
      </div>

      <!-- 课程状态选择 -->
      <div class="flex items-center gap-2">
        <span class="text-gray-600 whitespace-nowrap">{{$t('course.courseStatus')}}</span>
        <el-select v-model="filterForm.status" :placeholder="$t('common.selectPhTxt', [$t('course.courseStatus')])" class="w-40" clearable>
          <el-option v-for="option in COURSE_STATUS_OPTIONS" :key="option.value" :label="option.label"
            :value="option.value" />
        </el-select>
      </div>

      <!-- 操作按钮 -->
      <div class="flex ml-auto">
        <el-button @click="handleReset">{{$t('common.resetTxt')}}</el-button>
        <el-button type="primary" @click="handleSearch">{{$t('common.searchTxt')}}</el-button>
      </div>
    </div>

    <!-- 分隔线 -->
    <div class="separator"></div>

    <!-- 新增按钮区域 -->
    <div class="add-button-area">
      <el-button type="primary" @click="handleAdd">
        {{$t('common.newTxt')}}
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { type FilterForm } from './types'
import { COURSE_STATUS_OPTIONS } from '#/types/const'
import { $t } from '#/locales/index.js'
// 定义事件
const emit = defineEmits<{
  search: [filterForm: FilterForm]
  reset: []
  add: []
}>()

// 过滤表单数据
const filterForm = reactive<FilterForm>({
  name: '',
  status: '',
  // subjectCategory: ''
})

// 搜索处理
const handleSearch = () => {
  emit('search', { ...filterForm })
}

// 重置处理
const handleReset = () => {
  filterForm.name = ''
  filterForm.status = ''
  // filterForm.subjectCategory = ''
  emit('reset')
}

// 新增处理
const handleAdd = () => {
  emit('add')
}
</script>

<style scoped>
.separator {
  height: 1px;
  background-color: #dcdfe6;
  margin-top: 24px;
}

.add-button-area {
  padding-top: 16px;
}
</style> 
